<template>
    <div>
        <el-pagination
                :page-sizes="pageSizes"
                :current-page.sync='currentPage'
                :page-size.sync="curPageSize"
                layout="sizes, prev, pager, next, jumper"
                background
                style="margin-top:32px;"
                :page-count="pageCount"
                :pager-count="overflowNum">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "ubi-data-pagination",
    data () {
        return {

        }
    },
    props:{
        page: {//当前页
            type:Number,
            default:1
        },
        pageSize: {
            type:Number,
            default:8
        },
        pageCount: {
            type: Number,
            default: 0
        },
        pageSizes: {
            type: Array,
            default: () => [8,10,20,30]
        },
        overflowNum: {
            type: Number,
            default:5
        }
    },
    computed: {
        currentPage: { //监听当前页的变化
            get () {
                return this.page
            },
            set(val) {
                this.$emit('update:page',val)
            }
        },
        curPageSize: {
            get () {
                return this.pageSize
            },
            set (val) {
                this.$emit("update:pageSize", val)
            }
        }
    },
    mounted () {

    }
}
</script>

<style scoped>

</style>
